<template>
	<s-table
		ref="tableRef"
		:columns="columns"
		:data="loadData"
		:row-key="(record) => record.id"
		:scroll="{ x: 'max-content' }"
		:size="5"
		:pageSizeOptions="['5', '10', '20']"
	>
		<template #bodyCell="{ column, record }">
			<template v-if="column.dataIndex === 'action'">
				<a-space>
					<a-button type="link" primary size="small" @click="detailRef.onOpen(record.id)">明细</a-button>
				</a-space>
			</template>
		</template>
	</s-table>
	<Detail ref="detailRef" @successful="tableRef.refresh(true)" />
</template>

<script setup name="loan">
	import caseApi from '@/api/tjzy/case/caseApi'
	import Detail from '@/views/tjzy/case/detail/loan/detail.vue'

	const props = defineProps({
		batchNumber: String,
		debtorCardId: String
	})
	const searchFormState = ref({
		current: 1,
		size: 5,
		batchNumber: props.batchNumber,
		debtorCardId: props.debtorCardId
	})
	const tableRef = ref()
	const detailRef = ref()
	const columns = [
		{
			title: '甲方系统主键',
			dataIndex: 'partnerBusinessId',
			width: '200px'
		},
		{
			title: '合同编号',
			dataIndex: 'contractNo',
			width: '200px'
		},
		{
			title: '借款编号',
			dataIndex: 'loanKey',
			width: '300px'
		},
		{
			title: '资金方编码',
			dataIndex: 'funder',
			width: '250px'
		},
		{
			title: '总期数',
			dataIndex: 'totalPeriod',
			width: '100px'
		},
		{
			title: '订单放款日期',
			dataIndex: 'loanDate',
			width: '200px'
		},
		{
			title: '订单放款金额',
			dataIndex: 'loanAmount',
			width: '150px'
		},
		{
			title: '合同利率',
			dataIndex: 'contractRate',
			width: '150px'
		},
		{
			title: '收款账户',
			dataIndex: 'bankAccount',
			width: '200px'
		},
		{
			title: '收款账户归属银行',
			dataIndex: 'bankName',
			width: '200px'
		},
		{
			title: '操作',
			dataIndex: 'action',
			fixed: 'right',
			align: 'center'
		}
	]
	const loadData = (parameter) => {
		searchFormState.value.current = parameter.current
		return caseApi.caseDetailPage(searchFormState.value).then((res) => {
			return res
		})
	}
</script>
